<template>
<div class="list" ref="wrapper">
  <div>
      <div class="area">
        <div class="title border-topbottom">当前城市</div>
        <div class="button-list">
          <div class="button-wrapper">
          <div class="button">{{this.city}}</div>
            </div>
        </div>
        </div>
      <div class="area">
        <div class="title border-topbottom">热门</div>
        <div class="button-list">
          <div class="button-wrapper" v-for="item of hotCities" :key="item.id" >
          <div class="button" @click="handleCityChange(item.name)">{{item.name}}</div>
            </div>

        </div>
        </div>
        <!--
          对象也可以for循环的，之前的时候也有记录
          for循环里面的key值不能重复，要不会出现性能上的问题
          因为A-Z 不会重复 所以父级的for索引key可以用key来赋值。
          一个for循环里面。key尽量不要一样。 如果和下面的Key一样也没事。 只要同一级不一样就好
         -->
        <div class="area" v-for="(item,key) of cities" :key="key" :ref="key">
        <div class="title border-topbottom">{{key}}</div>
        <div class="item-list">
              <div class="item border-bottom"
              v-for="innerItem of item" :key="innerItem.id"
              @click="handleCityChange(innerItem.name)"
               >{{innerItem.name}}</div>
        </div>
        </div>
  </div>
</div>
</template>
<script>
import BScroll from "better-scroll";
import { mapState,mapActions } from "vuex";
export default {
  props: {
    hotCities: Array,
    cities: Object,
    letter: String
  },
  /**
  Better-scroll的使用和字母表的布局
  better-scroll 简书 https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/installation.html
  HTML满足条件 最外层要在wrapper 包住content。 区域就会滑动了
    <div class="wrapper">
    <div class="content">
    </div>
    </div>
    这里讲的只有用法。 而且是最基础的。 可以去官网看看详细用法。
   */

  name: "cityList",
  computed: {
    ...mapState(["city"])
    // 也能帮city新起一个名字在该页面用
    // ...mapState({
    //   currentCity:'city'
    // })
  },
  methods: {
    handleCityChange(cityName) {
      // alert(555);
      // this.$store.dispatch("changePatch", cityName);
      this.changePatch(cityName)
      this.$router.push("/");
    },
    ...mapActions(['changePatch'])
  },
  watch: {
    /**
     * @param {String} this.letter 这个代表点击的字母表
     * @method this.scrroll.scrollToElement BetterSCroller提供了这个方法。 可以让界面跳转显示到对应的refDom结点下。
     * @example  对于一个for循环的ref里面。this.$ref[this.letter] 铺货的是一个数据类型。里面还有其它数据。 所以直接取弟0个的时候，即是该letter的DoM结点
     * for循环里面的ref 都要获取弟0个才是结点
     */
    letter(newVal, oldVal) {
      // console.log(`${newVal}+${oldVal}`)
      if (this.letter) {
        const element = this.$refs[this.letter][0];
        // console.log(element)
        this.scroll.scrollToElement(element);
      }
    }
  },
  mounted() {
    this.scroll = new BScroll(this.$refs.wrapper);
    this.scroll.refresh();
  },
  activated(){
      this.scroll = new BScroll(this.$refs.wrapper);
    this.scroll.refresh();
  }
};
</script>
<style lang="stylus" scoped>
@import '~styles/varibles.styl';

.border-topbottom {
  &:before {
    border-color: #ccc;
  }

  &:after {
    border-color: #ccc;
  }
}

// 新建一个class. 因为item那里有padding了。 如果在那里加伪类。padding下边没有边线。 这样的话， 就不会出现那种情况
.border-bottom {
  &:after {
    border-color: #ccc;
  }
}

.title {
  line-height: 0.54rem;
  background: #eee;
  padding-left: 0.2rem;
  color: #666;
  font-size: 0.26rem;
}

.list {
  height 100vh-1.68rem;
  overflow: hidden;
  overflow-y scroll;
  position: absolute;
  top: 1.68rem;
  left: 0;
  right: 0;
  bottom: 0;

  .button-list {
    overflow: hidden;
    padding: 0.1rem 0.6rem 0.1rem 0.1rem;

    .button-wrapper {
      float: left;
      width: 33.33%;

      .button {
        margin: 0.1rem;
        padding: 0.1rem 0;
        text-align: center;
        border: 0.02rem solid #ccc;
        border-radius: 0.06rem;
      }
    }
  }

  .item-list {
    .item {
      line-height: 0.76rem;
      color: #666;
      padding-left: 0.2rem;
    }
  }
}
</style>

